<template>
	<view class="newaddress">
		<u-form :model="form" ref="uForm" label-width='150'>
			<u-form-item label="联系人" required prop='name'>
				<u-input v-model="form.name" placeholder='请输入联系人' />
			</u-form-item>
			<u-form-item label="联系电话" required prop='phone'>
				<u-input v-model="form.phone" placeholder='请输入联系电话' />
			</u-form-item>
			<u-form-item label="城市" required prop='city'>
				<view class="city" @click="show=true">
					<view :style="{color:form.city==''?'#c8c7cc':'#000'}">
						{{form.city?form.city:'选择城市'}}
					</view>
					<u-icon name="arrow-right" color="#c0c0c0" class="icon"></u-icon>

				</view>
			</u-form-item>
			<u-form-item label="详细地址" required prop='detail'>
				<u-input v-model="form.detail" placeholder='请输入详细地址' type='textarea' />
			</u-form-item>
			<u-form-item label="默认地址">
				<u-switch v-model="switchVal" slot="right"></u-switch>
			</u-form-item>
		</u-form>
		<view class="u-m-t-20">
			<u-button type="primary" @click="sumbit" v-if='btn'>添加地址</u-button>
			<u-button type="primary" @click="edit" v-if='!btn'>保存</u-button>
		</view>
		<u-picker :params="params" @confirm='confirm' mode="region" v-model="show"
			:area-code='["11", "1101", "110101"]'>
		</u-picker>
	</view>
</template>

<script>
	let _this = this;
	import {
		addAddress
	} from "../../common/http.api.js";
	export default {
		data() {
			return {
				sumbitId: '',
				btn: false,
				show: false,
				params: {
					province: true,
					city: true,
					area: true
				},
				form: {
					name: "",
					phone: '',
					detail: "",
					city: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入联系人',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
							required: true,
							message: '请输入联系电话',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					city: [{
						required: true,
						message: '请选择城市',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					detail: [{
						required: true,
						message: '请输入详细地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				switchVal: false
			}
		},
		methods: {
			edit() {
				this.$refs.uForm.validate(async valid => {
					uni.showLoading({
						title: "保存中",
						icon: 'none'
					})
					if (valid) {
						const arr = this.form.city.split('-');
						console.log(arr)
						const params = {
							name: this.form.name,
							address: this.form.detail,
							phone: this.form.phone,
							province: arr[0],
							city: arr[1],
							county: arr[2]
						}
						if (this.switchVal) {
							params.is_default = 1;
						}
						const url = '/api/address/' + this.sumbitId;
						const res = await this.$u.put(url, params);
						console.log(res);
						this.$u.toast('保存成功');
						setTimeout(() => {
							uni.redirectTo({
								url:"/pages/address/address"
							})
						}, 800)
						uni.hideLoading()
					} else {
						console.log('验证失败');
						uni.hideLoading()
					}
				});
			},
			confirm(e) {
				this.form.city = e.province.label + '-' + e.city.label + '-' + e.area.label
			},
			sumbit() {
				this.$refs.uForm.validate(async valid => {
					uni.showLoading({
						title: "添加中",
						icon: 'none'
					})
					if (valid) {
						const arr = this.form.city.split('-');
						const params = {
							name: this.form.name,
							address: this.form.detail,
							phone: this.form.phone,
							province: arr[0],
							city: arr[1],
							county: arr[2]
						}
						if (this.switchVal) {
							params.is_default = 1;
						}

						const res = await this.$u.api.addAddress(params)
						console.log(res);
						this.$u.toast('添加地址成功');
						setTimeout(() => {
							uni.redirectTo({
								url:"/pages/address/address"
							})
						}, 800)
						uni.hideLoading()
					} else {
						console.log('验证失败');
						uni.hideLoading()
					}
				});
			},
		},
		async onLoad(options) {
			this.sumbitId = options.id;
			uni.showLoading({
				title: "数据加载中",
				icon: 'none'
			})
			if (options.id) {
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})
				this.btn = false;
				const url = "/api/address/" + options.id;
				const res = await this.$u.get(url);
				console.log(res);
				this.form.name = res.data.name;
				this.form.phone = res.data.phone;
				this.form.city = res.data.province + "-" + res.data.city + '-' + res.data.county;
				this.form.detail = res.data.address;
				if (res.data.is_default) this.switchVal = true
				uni.hideLoading()
			} else {
				uni.setNavigationBarTitle({
					title: '添加地址'
				})
				this.btn = true;
				uni.hideLoading()
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	.newaddress {
		padding: 0 30rpx;
	}

	.city {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.active {
			color: #000;
		}
	}
</style>
